import React, { useState } from 'react'
import MenusView from "./meuns/MenusView";
import { Switch, Route, Redirect, useParams, withRouter } from "react-router-dom"
import LoginView from "./login/LoginView.jsx"
import CouresView from "./coures/CouresView.jsx"
import ProductView from "./product/ProductView.jsx"
import ServiceView from './service/ServiceView.jsx';
import AboutView from './about/AboutView.jsx';
import ProductDetail from './product/ProductDetail.jsx'
import Page404 from './404/Page404.jsx';

function App(props) {
  console.log(props)
  const [isLogin, setLoginState] = useState(true);
  return (
    <div className="App">
      <MenusView></MenusView>
      <div className="page-main">
        {/* 
        exact: 精确匹配路由， 只有url和path完全相同,才激活这个路由。
        component： 要渲染的组件；
        path： 路由的地址
        render: 渲染函数，返回要渲染的组件； 

        <Redirect to="/login"></Redirect>： 重定向组件。
        */}
        <Switch>
          {/* <Route path="/" exact component={LoginView}></Route> */}
          <Route path="/" exact render={() => <Redirect to="/coures"></Redirect>}></Route>
          <Route path="/coures" render={(props) => {
            // console.log("验证用户的权限")

            // // return isLogin ? <CouresView></CouresView> : <LoginView />
            // return isLogin ? <CouresView></CouresView> : <Redirect to="/login"></Redirect>
            return <CouresView {...props} />
          }}></Route>
          {/* <Route path="/coures" component={CouresView}></Route> */}
          <Route path="/product" exact component={ProductView}></Route>
          {/* 动态路由 */}
          <Route path="/product/:pid" component={ProductDetail}></Route>
          <Route path="/service" component={ServiceView}></Route>
          {/* 如果给about做2级路由，1级在app.js不做 exact */}
          <Route path="/about" component={AboutView}></Route>
          <Route path="/login" component={LoginView}></Route>

          <Route path="/404" component={Page404}></Route>
          {/* 最后，判断404 */}
          <Route path="*" render={() => <Redirect to="/404"></Redirect>}></Route>

        </Switch>

      </div>
    </div >
  );
}

export default withRouter(App);
